  <template>
  <div>
    <el-row :gutter="20" class="mb8">
      <el-col :span="24">
        <el-button
          size="mini"
          type="primary"
          style="margin-left: 20px; margin-top: 20px"
          icon="el-icon-plus"
          @click="dialogVisible = true"
          >新增</el-button
        >
      </el-col>
    </el-row>
    <el-table
      v-loading="loading"
      :data="tableData"
      border
      style="width: 95%; margin-left: 20px"
      @selection-change="handleSelectionChange"
    >
      <el-table-column prop="academicName" label="学年名称" align="center">
      </el-table-column>
      <el-table-column prop="semesterName" label="学期名称" align="center">
      </el-table-column>
      <el-table-column prop="workDate" label="工作开始日期" align="center">
      </el-table-column>
      <el-table-column prop="SemesterDate" label="学期开始日期" align="center">
      </el-table-column>
      <el-table-column
        prop="SemesterandDate"
        label="学期结束日期"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="workDate" label="工作结束日期" align="center">
      </el-table-column>
      <el-table-column prop="GradeName" label="年级名称" align="center">
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <!-- <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['system:user:edit']"
            ></el-button
          > -->
          <el-button
            type="success"
            icon="el-icon-edit"
            circle
            @click="dialogVisible2 = true"
            size="small"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      background
      style="margin-left: 780px; margin-top: 20px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage1"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="5"
    >
    </el-pagination>

    <el-dialog
      title="编辑[2022-2023学年]信息"
      :visible.sync="dialogVisible2"
      width="60%"
      @close="resetForm('form1')"
    >
      <el-form :model="form1" :rules="rules" ref="form1" label-width="130px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="学年名称:" prop="academicName">
              <el-input
                v-model="form1.academicName"
                style="width: 200px"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="学期名称:" prop="TermTitle">
              <el-select v-model="form1.TermTitle" style="width: 200px">
                <el-option label="第一学期" value="shanghai"></el-option>
                <el-option label="第二学期" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="工作开始日期:" prop="workDate">
              <el-date-picker
                :editable="false"
                v-model="form1.workDate"
                type="date"
                placeholder="选择日期"
                style="width: 200px"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="周天数:" prop="daysWeek">
              <el-input
                v-model="form1.daysWeek"
                style="width: 200px"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="学期开始日期:" prop="SemesterDate">
              <el-date-picker
                :editable="false"
                v-model="form1.SemesterDate"
                type="date"
                placeholder="选择日期"
                style="width: 200px"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="课长:" prop="lessonLength">
              <el-input
                v-model="form1.lessonLength"
                style="width: 200px"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="注册日期:" prop="dateofRegistration">
              <el-date-picker
                :editable="false"
                v-model="form1.dateofRegistration"
                type="date"
                placeholder="选择日期"
                style="width: 200px"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="上午课节数:" prop="shangjieke">
              <el-input
                v-model="form1.shangjieke"
                style="width: 200px"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="学期结束日期:" prop="SemesterandDate">
              <el-date-picker
                :editable="false"
                v-model="form1.SemesterandDate"
                type="date"
                placeholder="选择日期"
                style="width: 200px"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="下午课节数:" prop="xiajieke">
              <el-input
                v-model="form1.xiajieke"
                style="width: 200px"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="工作结束日期:" prop="EndDateOfWork">
              <el-date-picker
                :editable="false"
                v-model="form1.EndDateOfWork"
                type="date"
                placeholder="选择日期"
                style="width: 200px"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="晚上课节数:" prop="wanshangke">
              <el-input
                v-model="form1.wanshangke"
                style="width: 200px"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="本学年年级名称:" prop="GradeName">
              <el-input
                v-model="form1.GradeName"
                style="width: 200px"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="早上课节数:" prop="zaoshangke">
              <el-input
                v-model="form1.zaoshangke"
                style="width: 200px"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="学期周数:" prop="TheNumberOfWeeksOfTheSemester">
          <el-input
            v-model="form1.TheNumberOfWeeksOfTheSemester"
            style="width: 200px"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('form1')">保存</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="新增学年学期信息"
      :visible.sync="dialogVisible"
      width="60%"
      @close="resetForm('form1')"
    >
      <el-form :model="form1" :rules="rules" ref="form1" label-width="130px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="学年名称:" prop="academicName">
              <el-input
                v-model="form1.academicName"
                style="width: 200px"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="学期名称:" prop="TermTitle">
              <el-select v-model="form1.TermTitle" style="width: 200px">
                <el-option label="第一学期" value="shanghai"></el-option>
                <el-option label="第二学期" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="工作开始日期:" prop="workDate">
              <el-date-picker
                :editable="false"
                v-model="form1.workDate"
                type="date"
                placeholder="选择日期"
                style="width: 200px"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="周天数:" prop="daysWeek">
              <el-input
                v-model="form1.daysWeek"
                style="width: 200px"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="学期开始日期:" prop="SemesterDate">
              <el-date-picker
                :editable="false"
                v-model="form1.SemesterDate"
                type="date"
                placeholder="选择日期"
                style="width: 200px"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="课长:" prop="lessonLength">
              <el-input
                v-model="form1.lessonLength"
                style="width: 200px"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="注册日期:" prop="dateofRegistration">
              <el-date-picker
                :editable="false"
                v-model="form1.dateofRegistration"
                type="date"
                placeholder="选择日期"
                style="width: 200px"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="上午课节数:" prop="shangjieke">
              <el-input
                v-model="form1.shangjieke"
                style="width: 200px"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="学期结束日期:" prop="SemesterandDate">
              <el-date-picker
                :editable="false"
                v-model="form1.SemesterandDate"
                type="date"
                placeholder="选择日期"
                style="width: 200px"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="下午课节数:" prop="xiajieke">
              <el-input
                v-model="form1.xiajieke"
                style="width: 200px"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="工作结束日期:" prop="EndDateOfWork">
              <el-date-picker
                editable                v-model="form1.EndDateOfWork"
                type="date"
                placeholder="选择日期"
                style="width: 200px"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="晚上课节数:" prop="wanshangke">
              <el-input
                v-model="form1.wanshangke"
                style="width: 200px"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="本学年年级名称:" prop="GradeName">
              <el-input
                v-model="form1.GradeName"
                style="width: 200px"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="早上课节数:" prop="zaoshangke">
              <el-input
                v-model="form1.zaoshangke"
                style="width: 200px"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="学期周数:" prop="TheNumberOfWeeksOfTheSemester">
          <el-input
            v-model="form1.TheNumberOfWeeksOfTheSemester"
            style="width: 200px"
          ></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('form1')">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';

export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
      editable:false,
      currentPage1: 1,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      form1: {
        zaoshangke: "",
        wanshangke: "",
        xiajieke: "",
        shangjieke: "",
        lessonLength: "",
        daysWeek: "",
        TermTitle: "",
        TheNumberOfWeeksOfTheSemester: "",
        GradeName: "",
        EndDateOfWork: "",
        academicName: "",
        workDate: "",
        SemesterDate: "",
        dateofRegistration: "",
        SemesterandDate: "",
      },
      input: "2023-2024",
      dialogVisible: false,
      dialogVisible2: false,
      //   loading: true,
      tableData: [
        {
          academicName: "2022-2023",
          semesterName: "第一学期",
          workDate: "2022-08-10",
          SemesterDate: "2022-08-30",
          SemesterandDate: "2023-01-20",
          WorkDate: "2023-01-20",
          GradeName: "2022级",
        },
        {
          academicName: "2022-2023",
          semesterName: "第二学期",
          workDate: "2023-02-20",
          SemesterDate: "2023-03-01",
          SemesterandDate: "2023-07-10",
          workDate: "2023-07-20",
          GradeName: "2022级",
        },
        {
          academicName: "2021-2022",
          semesterName: "第一学期",
          workDate: "2022-08-10",
          SemesterDate: "2022-08-30",
          SemesterandDate: "2023-01-20",
          workDate: "2023-01-20",
          GradeName: "2022级",
        },
        {
          academicName: "2021-2022",
          semesterName: "第二学期",
          workDate: "2022-08-10",
          SemesterDate: "2022-08-30",
          SemesterandDate: "2023-01-20",
          workDate: "2023-01-20",
          GradeName: "2022级",
        },
        {
          academicName: "2020-2021",
          semesterName: "第一学期",
          workDate: "2022-08-10",
          SemesterDate: "2022-08-30",
          SemesterandDate: "2023-01-20",
          workDate: "2023-01-20",
          GradeName: "2022级",
        },
      ],
      rules: {
        academicName: [
          { required: true, message: "请输入学年名称", trigger: "blur" },
        ],
        semesterName: [
          { required: true, message: "请输入学期名称", trigger: "blur" },
        ],
        workDate: [
          {
            type: "date",
            required: true,
            message: "请选择工作开始日期",
            trigger: "blur",
          },
        ],
        SemesterDate: [
          {
            type: "date",
            required: true,
            message: "请选择学期开始日期",
            trigger: "blur",
          },
        ],
        SemesterandDate: [
          {
            type: "date",
            required: true,
            message: "请选择学期结束日期",
            trigger: "blur",
          },
        ],
        workDate: [
          {
            type: "date",
            required: true,
            message: "请选择工作开始日期",
            trigger: "blur",
          },
        ],
        GradeName: [
          { required: true, message: "请输入年级名称", trigger: "blur" },
        ],
        dateofRegistration: [
          {
            type: "date",
            required: true,
            message: "请选择注册日期",
            trigger: "blur",
          },
        ],
        EndDateOfWork: [
          { required: true, message: "请选择活动名称", trigger: "blur" },
        ],
        TheNumberOfWeeksOfTheSemester: [
          { required: true, message: "请输入学期周数", trigger: "blur" },
        ],
        daysWeek: [
          { required: true, message: "请输入周天数", trigger: "blur" },
        ],
        TermTitle: [
          { required: true, message: "请选择学期名称", trigger: "blur" },
        ],
        lessonLength: [
          { required: true, message: "请输入课长", trigger: "blur" },
        ],
        shangjieke: [
          { required: true, message: "请输入上午课节数", trigger: "blur" },
        ],
        xiajieke: [
          { required: true, message: "请输入下午课节数", trigger: "blur" },
        ],
        wanshangke: [
          { required: true, message: "请输入晚上课节数", trigger: "blur" },
        ],
        zaoshangke: [
          { required: true, message: "请输入早上课节数", trigger: "blur" },
        ],
      },
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    resetForm(form1) {
      this.$refs[form1].resetFields();
    },
    submitForm(form1) {
      this.$refs[form1].validate((valid) => {
        if (valid) {
          alert("成功!");
          this.dialogVisible = false;
          this.dialogVisible2 = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
// @import url(); 引入公共css类
.d1 {
  display: flex;
  justify-content: space-around;
}
.el-input {
  float: left;
}
// .el-form-item{
//     float: right;
// }
.el-form {
  width: 100%;
}
</style>
